Cómo crear una "piel" para Launchy

Aspecto final del skin para Launchy creado  para este artículo

Desde que uso Launchy se ha vuelto un componente imprescindible instalado en todos mis equipos. Ayer, depués de estar experimentando la posibilidad de llevarlo en un pendrive, acabé perdiendo la configuración del programa. En particular, la "piel" que utilizaba, una versión que había modificado de Fling for Launchy.

Una de las cosas que, en general, no me gusta de los skins para Launchy es que las cajas de búsqueda son pequeñas (o quizás es que me estoy haciendo mayor y necesito letras gordotas)... En cualquier caso, he pensado que sería interesante crear mi propia "piel" para Launchy. No he encontrado ningún tutorial sencillo o completo, así que aquí van mis notas sobre cómo he creado mi propia piel personalizada para Launchy.

En versiones anteriores era necesario crear diferentes archivos para la interfaz gráfica de Launchy. Sin embargo, desde la versión 2.x (la actual es la 2.5), el sistema de skins se ha simplificado considerablemente. De hecho es posible crear un skin a partir de únicamente una imagen y un fichero de texto.

Como mis dotes para el diseño gráfico son limitadas, he buscado en internet y he encontrado estas cajas de búsqueda en la web de Design3edge.En vez de Photoshop, he utilizado Paint.NET, un programa gratuito, para modificar la imagen. Comparando la imagen de la web de Design3edge y la de cabecera de este post puedes ver que he eliminado el texto "Quick Search" del lazo que envuelve a la caja de búsqueda y que he creado una "caja" para ubicar el icono (eliminado el botón "Go").

Imagen "base" para la piel personalizada

Esta imagen es la base sobre la que mostraremos los diferentes elementos dinámicos de Launchy.

Secciones básicas para mostrar contenido dinámico en Launchy

Lo habitual es definir varias zonas: input (la caja de entrada de texto), output (con el resultado de la búsqueda) y outputIcon (el icono asociado al fichero que lanzará Launchy). En algunos skins minimalistas se omite el icono asociado al fichero, pero yo considero que proporciona una ayuda visual importante para identificar el resultado de la búsqueda y prefiero que se muestre.

Para este skin la imagen de base contiene tres zonas visuales diferenciadas para cada uno de los elementos, aunque esto no es más que un recurso estético. Como puedes ver en la página inicial de Launchy, algunos skins muestran la caja de texto, el resultado y el icono en una imagen sin separaciones entre una zona y otra,

En este skin no hay indicaciones visuales que indiquen dónde está la caja de texto, dónde va el icono y dónde el resultado de la búsqueda.

El fichero style.qss

Algunos skins añaden imágenes adicionales para mostrar el botón de configuración de Launchy o para modificar el aspecto visual de la barra de desplazamiento de los resultados alternativos. Como siempre es posible acceder a la configuración de Launchy desde el menú contextual que aparece al hacer click con el botón secundario sobre Launchy, no considero necesario incluir el botón de opciones. En cuanto al aspecto de las barras de desplazamiento, prefiero que adopten el aspecto del sistema operativo.

Una vez tengas la imagen base de tu skin, crea un fichero de texto y llámalo "style.qss". En este fichero definiremos el aspecto y posición de los elementos que Launchy muestra dinámicamente.

La ubicación de las "zonas" donde Launchy mostrará la información se especifica mediante el fichero style.qss. La sintaxis para especificar el estilo de cada uno de los campos es la misma que para estilar  páginas web: CSS.

Desgraciadamente, no hay -o no he encontrado- documentación oficial sobre el proceso de creación de un skin excepto la recomendación de copiar el skin Default y modificarlo.

Crea una carpeta con el nombre de tu skin. En mi caso, he adoptado el nombre de las cajas de búsqueda que aparece en Design3edge: QuickCleanSearch. Dentro de la carpeta, copia tu imagen base. La imagen debe estar en formato PNG, con nombre frame.png. Siguiendo el consejo de la guía de usuario de Launchy, copia el fichero style.qss del skin Default en esta carpeta.

En el fichero Author.txt puedes indicar que eres el autor del skin, qué te ha llevado a crearlo, etc...

Modificando style.qss

Hasta ahora sólo he indicado qué piezas componen una piel de Launchy, pero es ahora cuando vamos a "ensuciarnos las manos" haciendo que el skin funcione.

Cada uno de los selectores contiene dos tipos de entradas: las CSS, con información sobre el aspecto del elemento y las específicas de Launchy, normalmente con prefijo qproperty-. A continuación indico los selectores que he encontrado y la función que realizan específicas de Launchy.

Edita el fichero style.qss con un editor de texto (te sirve el Notepad.exe de Windows, por ejemplo).

#launchy{}

Este selector está vacío en todos los skins que he revisado. Si se elimina, el skin funciona igual, así que no entiendo para qué sirve...

#opsButton{} y #opsButton:pressed{}

Permiten modificar el aspecto del botón de opciones. Normalmente se carga una imagen para mostrar el botón. Como he explicado antes, no considero que sea necesario mostrarlo.

#workingAnimation {}

Muestra un spinner (una imagen animada) mientras se obtienen resultados alternativos. Launchy funciona tan rápido que no suele aparecer... Tampoco lo considero necesario.

#input {}, #output

En este selector se especifica el aspecto de la caja de texto donde el usuario introduce el texto a buscar y la zona de salida de la coincidencia encontrada por Launchy. Además de indicar el aspecto con el que Launchy lo mostrará, las propiedades qproperty-alignment y qproperty-geometry te permiten definir cómo se alinea el texto en la caja y las dimensiones de la caja, respectivamente.

• qproperty-alignment admite los valores AlignLeft, AlignRight y AlignCenter. Como imaginas, alinean el texto a la izquierda, a la derecha o lo centran, respectivamente.
• qproperty-geometry admite un único parámetro, rect(x y Ancho Alto). Como ves, define un rectángulo indicando la coordenada de la esquina superior izquierda y el ancho y alto del rectángulo.

El origen se encuentra en la esquina superior izquierda, aumentando hacia la derecha y hacia abajo.

Puedes obtener las coordenadas de estos rectángulos a través de tu editor de imágenes, ya que muchos muestran la posición del cursor en la barra de estado.

#outputIcon{}

Este selector se encarga de definir el aspecto del icono asociado al fichero que coincide con el texto buscado. Lo habitual es especificar únicamente la posición mediante qproperty-geometry, con un ancho y alto del rectángulo de 32x32 (o 64x64, que son tamaños habituales para los iconos).

Launchy ajusta automáticamente el tamaño del icono a las dimensiones del rectángulo.

#alternatives{}

El selector #alternatives{} hace referencia a la lista con resultados que muestra Launchy si la primera coincidencia no es la que buscamos. Esta lista de alternativas se muestra automáticamente pasados unos segundos o al pulsar la tecla de "flecha abajo".

Como en los casos anteriores definimos las dimensiones y posición de esta lista mediante qproperty-geometry.

Dentro de #alternatives{} encontramos una propiedad que hace referencia al color de fondo de los resultados. El color del fondo de la lista se especifica mediante el clásico background-color, pero para conseguir un efecto zebra, podemos utilizar alternate-background-color.

Para determinar el color del elemento seleccionado (en la imagen, la primera opción aparece resaltada en azul), utilizamos las propiedades selected-color y  selection-background-color.

Podemos definir estilos específicos para cada uno de los elementos de la lista, a través de la pseudo-clase #alternatives::item (añadiendo padding o márgenes, por ejemplo) e incluso la ruta de las alternativas mostradas mediante #alternativesPath.

Launchy interpreta colores en los siguientes formatos:

• hexadecimal: #ffffff (blanco)
• nombre: pink (rosa)
• rgb: rgb(0,255,0) (verde)
• rgba: rgba(0,0,255,50%) (azul con un grado de transparencia del 50%)

Estilos específicos de la barra de desplazamiento de la lista de alternativas

En el fichero de estilo del skin por defecto de Launchy se especifican muchos otros estilos específicos para dar el aspecto que deseemos a la barra de desplazamiento de la lista de alternativas. Personalmente, el aspecto de las barras de desplazamiento no es algo que me preocupe demasiado, así que he comentado las definiciones de estilos para estos selectores, conservándolos por si quieres echarle un vistazo.

Skin finalizada

En este artículo se describen "la teoría" para que puedas crear tu propia skin personalizada para Launchy. Como has visto, lo único que requieres es una imagen, un fichero de texto con algo de CSS, algunas propiedades específicas de Launchy y un poquito de imaginación.

Si quieres echarle un vistazo al skin creado para este artículo, lo puedes descargar de mi cuenta en Box.net.

¿Te animas a crear tu propia piel personalizada para Launchy?